<template>
	<view class="selfApply">
		<xbd-pages-content title="自助餐申请">
			<template #content>
				<view class="content"  :style="'minHeight : ' + windowHeight + 'px;'">
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<!-- #ifdef APP-PLUS || H5 -->
						<view class="date">
							<uni-forms-item :label-width="85" required label="就餐日期" name="dateSta">
								<view class="box">
									<picker fields="day" mode="date" :value="formData.dateSta" :start="startDate"
										:end="endDate" @change="bindDateChangeSta">
										<view class="uni-input">
											<view class="">
												<image src="@/static/images/date2.svg"></image>
												<text>{{formData.dateSta}}</text>
											</view>
										</view>
									</picker>
								</view>
							</uni-forms-item>
						</view>
						<!-- #endif -->
						<!-- #ifndef APP-PLUS || H5 -->
							<uni-forms-item :label-width="85" required label="就餐日期" name="dateSta">
								<view class="box">
									<xbd-date-pickers fields="day" :date="formData.dateSta" :visible.sync="visible" @setDate="setDateChange">
										<template>
											<view @click="visible = true">
												<image class="date2-img" src="@/static/images/date2.svg" mode=""></image>
												<text>{{ formData.dateSta }}</text>
											</view>
										</template>
									</xbd-date-pickers>
								</view>
							</uni-forms-item>
							</uni-forms-item>
						<!-- #endif -->
						<uni-forms-item :label-width="85" required label="就餐时段" name="date_type">
							<xbd-select :carId.sync="formData.date_type" :visible.sync="visible1"
								:infoList="typeArr" >
								<template>
									<view class="select" @click="visible1 = true">
										<view class="text" v-if="formData.date_type.length!==0"> {{formData.date_type || '请选择就餐时间段'}} </view>
										<view class="text prColor" v-else> 请选择就餐时间段 </view>
										<image class="image" src="@/static/images/health/right.svg" mode="">
										</image>
									</view>
								</template>
							</xbd-select>
						</uni-forms-item>
						<uni-forms-item class="area" :label-width="85" required label="申请理由" name="reason">
							<uni-easyinput :clearable="false" class="textarea" type="textarea"
								v-model="formData.reason" placeholder="请填写申请理由" :maxlength="100">
							</uni-easyinput>
							<!-- #ifdef APP-PLUS || H5 -->
							<view class="mit">
								字数限制：100
							</view>
							<!-- #endif -->
						</uni-forms-item>

						<uni-forms-item :label-width="85" required label="用餐人数" name="number">
							<uni-easyinput class="input" type="text" v-model="formData.number" placeholder="请输入用餐人数" />
						</uni-forms-item>
						<uni-forms-item :label-width="85" required label="人均金额" name="money">
							<xbd-select :carId.sync="formData.money" :visible.sync="visible2"
								:infoList="typeArr1" >
								<template>
									<view class="select" @click="visible2 = true">
										<view class="text" v-if="formData.money.length!==0"> {{formData.money || '请选择人均金额：元/人'}} </view>
										<view class="text prColor" v-else> 请选择人均金额：元/人 </view>
										<image class="image" src="@/static/images/health/right.svg" mode="">
										</image>
									</view>
								</template>
							</xbd-select>
						</uni-forms-item>

					</uni-forms>
					<view class="foot">
						<view class="btns">
							<button type="default" class="draft" @click="cancel">取消</button>
							<button type="default" class="upload" @click="submit">确认提交</button>
						</view>
					</view>
				</view>
			</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import {
		Meal
	} from '@/api/index.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				flag: true,//防抖
				visible:false,
				visible1:false,
				visible2:false,
				typeArr: [
					{
						value: '0',
						label: '早'
					},
					{
						value: '1',
						label: '中'
					},
					{
						value: '2',
						label: '晚'
					}
				],
				typeArr1: [
					{
						value: '0',
						label: '15'
					},
					{
						value: '1',
						label: '20'
					},
					{
						value: '2',
						label: '35'
					},
					{
						value: '3',
						label: '50'
					},
					{
						value: '4',
						label: '80'
					},
					{
						value: '5',
						label: '100'
					},
				],
				formData: {
					dateSta: currentDate,
					date_type:'',
					reason: '',
					number: '',
					money: '',

				},
				rules: {
					dateSta: {
						rules: [{
							required: true,
							errorMessage: '就餐日期：请选择就餐日期',
						}]
					},
					reason: {
					    rules: [{
					            required: true,
					            errorMessage: '申请理由：请填写申请理由',
					        }
					    ],
						validateTrigger: 'bind'
					},
					number: {
						rules: [{
							required: true,
							errorMessage: '用餐人数：请填写用餐人数',
						},
						{
							pattern: '^\\+?[1-9]\\d*$',
							errorMessage: '用餐人数：请输入大于0的整数',
						}]
					},
					date_type:{
						rules: [{
							required: true,
							errorMessage: '就餐时段：请选择就餐时段',
						}]
					},
					money: {
						rules: [{
							required: true,
							errorMessage: '人均金额：请选择人均金额',
						},
						{
							pattern: '^\\+?[1-9]\\d*$',
							errorMessage: '人均金额：请输入大于0的整数',
						}]
					},
				}
			};
		},
		methods: {
			setDateChange(date) {
				
				this.formData.dateSta = date;
			},
			cancel(){
				uni.navigateBack({
					delta: 1
				});
			},
			bindDateChangeSta: function(e) {
				this.formData.dateSta = e.target.value
				this.dateSta = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async submit(val) {
				const info = {
					ticket_type:'self',
					reason: this.formData.reason,
					person_count: +this.formData.number,
					date_type:this.formData.date_type,
					end_time: this.formData.dateSta ,
					average: +this.formData.money,  // 人均金额
				};
				console.log(info)
				this.$refs.form.setRules(this.rules)
				try {
					const valid = await this.$refs.form.validate();
					  if (this.flag) {
					  	try {
					  		this.flag = false
							this.$showLoading('加载中');
					  		 const res = await Meal.postTicketApply(info);
							 uni.hideLoading();
					  		if(res.success){
					  			uni.showToast({
					  				title: '您的申请提交成功！',
					  				icon: 'none',
					  			})
					  			setTimeout(() => {
					  				uni.navigateBack({
					  					delta: 1
					  				});
					  			}, 1500)
					  		}else{
								this.flag = true
								uni.showToast({
									title: res.msg,
									icon: 'none',
								})
							}
					  	} catch (err) {
					  	}
					  };
				} catch(err) {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				}
			},
		},
		computed: {
			...mapState(['windowHeight']),
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},

		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep uni-button:after {
		border: none !important;
	}
	::v-deep .uni-input {
		white-space: nowrap;
	}
	::v-deep .uni-forms-item__label{
		align-items: flex-start;
	}
	::v-deep .data-v-5772f9ee{
		vertical-align: sub;
		font-size: 28rpx;
		color: #999999;
		white-space: nowrap;
	}
	::v-deep .input{
		font-size: 28rpx;
		color: #999999;
		white-space: nowrap;
	}
	
	::v-deep .is-input-error-border{
		border: 0;
	}
	::v-deep .uni-easyinput {
		border-radius: 8rpx;
		border: 2rpx solid #999999;
		font-size: 28rpx;
	}
	::v-deep .input.data-v-5772f9ee{
		box-sizing: border-box;
		width: 100%;
	}
	::v-deep .label-text.data-v-61dfc0d0 {
		font-size: 32rpx;
		white-space: nowrap;
	}
.content{
	padding: 50rpx;
	background-color: #FFFFFF;
}
	.input {
		// width: 450rpx;
		height: 30px;
		border: 1px solid #999999;
		border-radius: 5px;
		padding-left: 10rpx;

		font-size: 28rpx;

		color: #999999;
	}
	
	.foot {
		margin-top: 100rpx;
		.btns {
			display: flex;
			justify-content: space-between;

			button {
				width: 300rpx;
				height: 30px;
				line-height: 30px;
				font-size: 28rpx;

				box-sizing: border-box;
			}

			.draft {
				color: #FFFFFF;
				margin-right: 50rpx;
				border-radius: 8rpx;
				background:url(../../../static/images/meal/gary.png) no-repeat;
				background-size: 100% 100%;
			}

			.upload {
				background:url(../../../static/images/common/bluebg.png) no-repeat;
				border-radius: 8rpx;
				background-size: 100% 100%;
				color: $uni-text-color-inverse;
			}
		}
	}
	.tag {
		font-size: 32rpx;
		color: #194769;
		margin: -10px 0 10px 100px;
	}
	.date {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}
	.box{
		display: flex;
		align-items: center;
		padding-right: 16rpx;
		height: 56rpx;
		border: 2rpx solid #999999;
		border-radius: 8rpx;
		.date2-img {
			// vertical-align: sub;
			width: 26rpx;
			height: 26rpx;
			margin:0 20rpx ;
		}
	}
	.select {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		height: 56rpx;
		border-radius: 8rpx;
		border: 1px solid #999999;
		box-sizing: border-box;
		padding: 0 20rpx;
	
		.text {
			flex: 1;
			// text-align: center;
			
		}
		.prColor{
			color: #BBC0C9 !important;
		}
	
		.image {
			transform: rotate(90deg);
			width: 38rpx;
			height: 38rpx;
		}
	}
	.smoll_date {
		display: flex;
		align-items: center;
		height: 32px;
		
		font-size: 28rpx;
		width: 100% !important;
		border: 2rpx solid #999999;
		border-radius: 4px;
		color: #999999;
		box-sizing: border-box;
	
		image {
			vertical-align: sub;
			width: 24rpx;
			height: 24rpx;
			margin:0 24rpx 4rpx 0rpx;
		}
	}
			.textarea {
				width: 100%;
				height: 100px;
				border: 1px solid #999999;
				border-radius: 5px;
				box-sizing: border-box;
				padding: 20rpx;
				
				font-size: 32rpx;
				
				color: #999999;
			}
			.area {
				position: relative;
				.mit {
					position: absolute;
					bottom: 30px;
					right: 30rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all{
				
				color: #999999;
				font-size: 24rpx;
				margin-bottom: 20px;
			}
</style>
